<template>
	<view class="container">
		<view class="tui-bg-box">
			<view style="display:flex;justify-content: center;">
				<image src="/static/images/login/logo.png" mode="aspectFit" style="width:260rpx"></image>
			</view>


			<view style="display:flex;padding: 50rpx;  font-size: 32rpx;color:#000;font-weight:bold;">
				为了您获得更好的体验，冲鸭外卖福利社申请获得以下权限：
			</view>
			<view style="display:flex;padding:0 50rpx;  font-size: 28rpx;color:#908e91;">获得您的公开信息(昵称、头像等)</view>
		</view>
		<view class="tui-login-in">
			<tui-button type="warning" hover-class="tui-button-hover" plain margin="0 0 40rpx 0" @click="routeToHome">
				回到首页
			</tui-button>
			<tui-button type="warning" hover-class="tui-button-hover" open-type="getUserInfo" :loading="btnLoading" @getuserinfo="requestLogin">
				授权登录
			</tui-button>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	const util = require("@/utils/util.js");
	const form = require("@/components/common/tui-validation/tui-validation.js");
	export default {
		data() {
			return {
				disabled: false,
				btnLoading: false,
				btnText: "获取验证码",
				username: "",
				password: "",
				type: "primary",
				routeFrom:''

			};
		},
		onLoad(options){
			
			if(options){
				this.routeFrom=options.from
			}
		
		},
		methods: {
			...mapMutations(["login"]),
			requestLogin() {
				let _this=this
				let userinfo = null
				let provider = null
				let code = null
				this.btnLoading = true
				uni.getProvider({
					service: 'oauth',
				}).then(res => {
					provider = res.find(item => {
						if (item) return item
					}).provider[0]
					return uni.login({
						provider: provider,
						scopes: 'auth_user',
					});
				}).then(res => {
					code = res.find(item => {
						if (item) return item
					}).code
					return uni.getUserInfo({
						provider: provider,
					})
				}).then(res => {
					console.log('getUserInfo then', res);
					userinfo = res.find(item => {
						if (item) return item
					}).userInfo
					console.log(userinfo)

					return this.tui.request("/api/user/login", "POST", {
						'jscode': code,
						nickname: userinfo.nickName,
						headimageurl: userinfo.avatarUrl,

					}, false, false, false)

				}).then(res => {
					console.log('userAuth then', res);
					if (res.code == 200) {
						let state = {
							token: res.token,
							nickname: userinfo.nickName,
							headimageurl: userinfo.avatarUrl,
						};
						uni.setStorageSync("userinfo", state);
						this.login(state);
						this.tui.toast("登录成功", 2000, true);
						setTimeout(() => {
							if(_this.routeFrom){
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.reLaunch({
									url: "/pages/tabbar/my/my",
								});
							}
							
						}, 200);
						this.btnLoading = false
					} else {
						this.btnLoading = false
					}

				}).catch(res => {
					console.log('wxGetUserInfo catch', res);
					this.btnLoading = false
				})
			},
			protocol: function() {
				uni.navigateTo({
					url: "/pages/doc/protocol/protocol",
				});
			},
			routeToHome() {
				uni.reLaunch({
					url: "/pages/tabbar/index/index",
				});
			}
		},
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.tui-login-in {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 999;
		padding: 10rpx 25rpx 15rpx;
		box-sizing: border-box;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44rpx;
	}

	.tui-photo {
		height: 138rpx;
		width: 138rpx;
		display: block;
		margin: 10rpx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 128rpx;
		height: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 250rpx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 360rpx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128rpx 104rpx 0 104rpx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32rpx;
		flex: 1;
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27rpx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: "";
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28rpx;
	}

	.tui-btn-class {
		width: 196rpx !important;
		height: 54rpx !important;
		border-radius: 27rpx !important;
		font-size: 28rpx !important;
		padding: 0 !important;
		line-height: 54rpx !important;
	}



	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin-top: 29rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>
